<template>
  <div>
    <div class="home-header-search">
      <van-search
        v-model="value"
        shape="round"
        background="rgb(255, 124, 13)"
        placeholder="输入商品名或粘贴宝贝标题搜索"
        @focus="onFocus"
      />
      <router-link class="home-message" to="/mine">
        <van-icon name="chat-o" size="20" />
        <span>消息</span>
      </router-link>
    </div>
    <div class="home-header-tab">
      <span class="home-header-tab-icon">精选</span>
      <div class="home-header-tab-list">
        <div class="home-header-tab-content">
          <div class="home-header-logo">
            <img
              src="https://img.alicdn.com/imgextra/i3/2053469401/O1CN01emU9Kr2JJi5zE60lc_!!2053469401.png"
              alt=""
              style="height: 0.14rem"
            />
          </div>
          <router-link
            v-for="item in headerList"
            :key="item.id"
            class="home-header-tab-item"
            :to="{
              name: 'food',
              params: { cid: item.id },
              query: { title: item.name },
            }"
          >
            {{ item.name }}
          </router-link>
        </div>
      </div>
      <van-popover v-model:show="showPopover">
        <van-grid clickable :border="false" column-num="4">
          <van-grid-item
            v-for="item in headerList"
            :key="item.id"
            @click="showPopover = false"
            :to="{
              name: 'food',
              params: { cid: item.id },
              query: { title: item.name },
            }"
          >
            <van-image :src="item.img1" alt="图片加载失败" />
            <span>{{ item.name }} </span>
          </van-grid-item>
        </van-grid>
        <template #reference>
          <van-icon name="wap-nav" color="white" />
        </template>
      </van-popover>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, computed, ref } from "vue";
import { useRouter } from "vue-router";
import { useStore } from "vuex";

export default defineComponent({
  setup() {
    const router = useRouter();
    const store = useStore();
    const headerList = computed(() => store.state.home.headerList);
    const onFocus = () => {
      router.push("/search");
    };
    const showPopover = ref(false);
    onMounted(() =>
      store.dispatch({
        type: "home/getHeaderList",
      })
    );
    return {
      onFocus,
      headerList,
      showPopover,
    };
  },
});
</script>

<style lang="stylus" scoped>
.home-header-search {
  width: 100%;
  height: 0.44rem;
  display: flex;
  font-size: 0.12rem;

  .van-search {
    flex: 1;
  }

  .home-message {
    display: flex;
    flex-direction: column;
    font-size: 0.12rem;
    justify-content: center;
    align-items: center;
    color: white;
    margin-right: 0.1rem;
  }
}

.home-header-tab {
  position: relative;
  height: 0.3rem;
  box-sizing: border-box;
  padding: 0 0.1rem;

  .home-header-tab-icon {
    position: absolute;
    top: 0.01rem;
    left: 0.1rem;
    color: white;
    border-bottom: 2px solid white;
    font-size: 0.14rem;
    padding-bottom: 0.02rem;
  }

  .home-header-tab-list {
    height: 0.3rem;
    width: 2.9rem;
    position: relative;
    margin: 0 auto;
    overflow: auto;

    &::-webkit-scrollbar {
      display: none;
    }

    .home-header-logo {
      display: flex;
      align-items: center;
      padding: 0 0.08rem;
    }

    .home-header-tab-content {
      position: absolute;
      display: flex;
      width: 9rem;

      .home-header-tab-item {
        font-size: 0.14rem;
        line-height: 0.3rem;
        padding: 0 0.08rem;
        color: rgba(255, 255, 255, 0.65);
      }
    }
  }

  .van-icon {
    position: absolute;
    right: 0.1rem;
    top: 0.05rem;
    font-size: 0.2rem;
  }
}
</style>
